.bottom-box {
    position: relative;
    box-shadow: 0 1px 1px #333;
  }
  .flex-box {
    background: #FFFFFF;
    color: #333;
    display: flex;
    align-items: center;
    height: 50px;
    .item {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      flex: 1;
      text-align: center;
      * {
        transition: color .3s, font-size .3s;
      }
      .grid-cell {
        line-height: 16px;
        font-size: 12px;
      }
      &.active {
        color: #2196f3;
        .grid-cell {
          font-size: 13px;
        }
      }
    }
  }
  .icon-svg {
    margin: auto;
    width: 24px;
    height: 24px;
    background-image: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  
  .svg-x-like {
    background-image: url('../../assets/svg/x/like.svg');
  }
  
  .svg-x-lanmu {
    background-image: url('../../assets/svg/x/lanmu.svg');
  }
  
  .svg-x-message {
    background-image: url('../../assets/svg/x/message.svg');
  }
  
  .svg-x-user {
    background-image: url('../../assets/svg/x/user.svg');
  }
  
  .svg-x-hg {
    background-image: url('../../assets/svg/x/hg.svg');
  }
  .svg-x-qiu {
    background-image: url('../../assets/svg/x/qiu.svg');
  }
  .svg-x-kf {
    background-image: url('../../assets/svg/x/kf.svg');
  }